<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬赏金管理信息系统</title>
</head>

<!-- 引入样式 -->

<link rel="stylesheet" href="../plugins/element-ui/index.css" />
<link rel="stylesheet" href="../css/index.css" />


<body>
<div class="app" id="app">
<el-container>
    <el-header>

            <div class="head-lable">
                <span>{{headTitle}}</span>
            </div>

            <div class="avatar-wrapper">欢迎你,{{ userInfo.username }}</div>

            <div class="right-menu">
                <img src="../img/logout.png" class="outLogin" alt="退出" @click="logout" />
            </div>

    </el-header>
    <el-container>
        <el-aside width="260px">
            <!--    左侧菜单-->
            <div class="left-menu" style="width: 200px; height: 340px">
                <!--    logo-->
                <div class="logo">
                    <img src="../img/login/logo.png" alt="" style="width: 200px" />
                </div>
                <!--    菜单列表-->
                <el-row class="tac">
                    <el-col :span="12">
                        <el-menu
                                :default-active="defAct"
                                :unique-opened="false"
                                :collapse-transition="false"
                                class="el-menu-vertical-demo"
                        >
                            <div v-for="item in menuList" :key="item.id">
                            <el-menu-item index="2" :index="item.id" @click="menuHandle(item,false)">
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>

                            </div>
                        </el-menu>
                    </el-col>
                </el-row>

            </div>
        </el-aside>


        <el-main  v-loading="loading"><!--        内特区-->
            <iframe
                    id="cIframe"
                    class="c_iframe"
                    name="cIframe"
                    :src="iframeUrl"
                    width="100%"
                    height="560px"
                    frameborder="0"
                    v-show="!loading"
                    style="scrolling: no"
            ></iframe>
        </el-main>
    </el-container>
</el-container>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script src="../api/food.js"></script>

<!--vue-->
<script>
 new Vue({
    el: '#app',
    data() {
        return {
            userInfo: {},
            loading: true,
            timer: null,
            goBackFlag: false,
            iframeUrl: 'list.html',
            headTitle: '悬赏令管理',
            defAct: '2',
            menuActived: '2',
            menuList: [
                {
                    id: '2',
                    name: '悬赏令管理',
                    url: 'list.html',
                },
                {
                    id: '3',
                    name: '情报管理',
                    url: 'information.html',
                },
                {
                    id: '4',
                    name: '分类管理',
                    url: 'navy.html',
                }
            ],
        }
    },

     created(){
         //获取localStorage对象
         const userInfo = window.localStorage.getItem('userInfo')
         if (userInfo) {
             this.userInfo = JSON.parse(userInfo)
         }
         this.closeLoading()
     },

     beforeDestroy() {
         this.timer = null
         clearTimeout(this.timer)
     },

     mounted() {
         window.menuHandle = this.menuHandle
     },

     methods:{
        //退出
         logout() {
                this.$confirm("是否确认退出?",{
                    iconClass:"el-icon-question",
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    showClose: true,
                    type: "warning"
             }).then(function (){
                    //确认退出
                    logoutApi().then((res)=>{
                        if(res.code == 1){
                            localStorage.removeItem('userInfo')
                            window.location.href = 'login.html'
                        }
                    })
                }).catch(function (err){
                    this.$message.error('请求出错了：' + err)
                });
         },
         goBack() {
             const menu = this.menuList.find(item=>item.id===this.menuActived)
             this.menuHandle(menu,false)
         },
         menuHandle(item, goBackFlag) {
             this.loading = true
             this.menuActived = item.id
             this.iframeUrl = item.url
             this.headTitle = item.name
             this.goBackFlag = goBackFlag
             this.closeLoading()
         },
         closeLoading(){
             this.timer = null
             this.timer = setTimeout(()=>{
                 this.loading = false
             },1000)
         }
     }
 })
</script>


</body>
</html>